<!-- 首页热榜功能的类型按钮选择 组件 -->
<template>
  <div id="homeHotTypeBtn" :style="hotList.isClick?btnStyle:''" @click="doClick">
    {{ hotList.name }}
  </div>
</template>

<script>
export default {
  name: 'homeHotTypeBtn',
  components: {
  },
  props: ['hotList'],
  data () {
    return {
      btnStyle: [{'color': '#0084ff'}, {'background-color': 'rgba(0,132,255,.1)'}]
    }
  },
  computed: {
  },
  methods: {
    doClick () {
      if (!this.hotList.isClick) {
        this.$emit('changeType', this.hotList.name)
      }
    }
  }
}
</script>

<style scoped>
  /*@import 'xxx.css';*/
  #homeHotTypeBtn{
    height: 30px;
    width: auto;
    font-size: 14px;
    font-weight: 500;
    float: left;
    padding: 0px 20px;
    margin: 0px 4px;
    border-radius: 2px;
    color: #646464;
    background-color: #f6f6f6;
    cursor: pointer;
  }

  #homeHotTypeBtn:hover{
    color: #424242;
    background-color: rgba(0, 132, 255, 0.07);
  }
</style>
